<style lang="less">
.form-detail-vue {
  .h-panel-body {
    padding-right: 60px;
  }
  .info-basic {
    margin-top: 30px;
    margin-bottom: 30px;
  }
  .info-table {
    margin-top: 30px;
    .h-tabs {
      margin-bottom: 20px;
    }
  }
  .info-title {
    font-size: 16px;
    font-weight: bold;
  }
  .table-wrapper {
    padding: 0 20px;
  }
}
</style>

<template>
  <div class="app-form frame-page form-detail-vue">
    <div class="h-panel">
      <div class="h-panel-bar">
        <span class="h-panel-title">订单详情</span>
        <span style="float: right"><Button @click="goBack" :text="true" style="font-size: 18px; color: #3b91ff">返回</Button></span>
      </div>
      <div class="h-panel-body">
        <div class="info-title">宝贝信息</div>
        <!-- 基础信息 -->
        <div class="info-basic">
          <Row :space="24">
            <Cell :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <Row :space="24">
                <Cell :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                  <Row :space="24">
                    <Cell :xs="4" :sm="4" :md="4" :lg="4" :xl="4" style="line-height: 150px"> <label for="name">宝贝主图：</label></Cell>
                    <Cell :xs="20" :sm="20" :md="20" :lg="20" :xl="20"
                      ><div style="width: 150px; height: 150px">
                        <Avatar
                          src="https://img2.baidu.com/it/u=2356581330,740880381&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500"
                          :width="150"
                          fit="fill"
                          noInfo
                        ></Avatar></div
                    ></Cell>
                  </Row>
                </Cell>
              </Row>
              <Row :space="24">
                <Cell :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                  <Row :space="24">
                    <Cell :xs="2" :sm="2" :md="2" :lg="2" :xl="2"><label for="name">宝贝名称：</label></Cell>
                    <Cell :xs="10" :sm="10" :md="10" :lg="10" :xl="10"><div>精品台农芒果</div></Cell>
                    <Cell :xs="4" :sm="4" :md="4" :lg="4" :xl="4"><label for="name">需要发货数量：</label></Cell>
                    <Cell :xs="1" :sm="1" :md="1" :lg="1" :xl="1"><div>1</div></Cell>
                  </Row>
                </Cell>
              </Row>
            </Cell>
          </Row>
        </div>

        <div class="info-title">收货信息</div>
        <!-- 基础信息 -->
        <Form class="info-basic" :label-width="90" mode="twocolumn" readonly>
          <FormItem label="收货人"> 张三 </FormItem>
          <FormItem label="联系号码：">
            <span>138****0000</span>
          </FormItem>
          <FormItem label="地址：">
            <span>xx区xx弄</span>
          </FormItem>
        </Form>
        <!-- 
        <div class="info-title">操作记录</div>
        <section class="info-table">
          <Tabs :datas="tabConfig" v-model="selectedTab" @change="tabChanged"></Tabs>

          <div v-if="selectedTab == 'module1'" class="table-wrapper">
            <Table :datas="datas" :columns="columns">
              <template v-slot:empty>自定义提醒：暂时无数据</template>
            </Table>
          </div>

          <div v-if="selectedTab == 'module2'" class="table-wrapper">
            <Table :datas="datas2" :columns="columns">
              <template v-slot:empty>自定义提醒：暂时无数据</template>
            </Table>
          </div>
        </section> -->
      </div>
    </div>
  </div>
</template>
<script>
import { Image } from 'echarts/lib/util/graphic';
import { message } from 'heyui';
import { imagePreview } from 'heyui';

export default {
  data() {
    return {
      tabConfig: {
        module1: '变更数据'
      },
      selectedTab: 'module1',
      columns: [
        { title: '操作类型', prop: 'operateType' },
        { title: '操作人', prop: 'operateBy' },
        { title: '执行结果', prop: 'operateResult' },
        { title: '操作时间', prop: 'operateTime' },
        { title: '备注', prop: 'remark' }
      ],
      datas: [
        { id: 1, operateType: '订购关系生效', operateBy: '张三', operateResult: '成功', operateTime: '2019-02-14 13:27:12', remark: '-' },
        { id: 2, operateType: '财务复审', operateBy: '李四', operateResult: '驳回', operateTime: '2019-02-14 13:27:12', remark: '不通过原因' },
        { id: 3, operateType: '部门初审', operateBy: '李四', operateResult: '成功', operateTime: '2019-02-14 13:27:12', remark: '-' },
        { id: 4, operateType: '提交订单', operateBy: '王五', operateResult: '成功', operateTime: '2019-02-14 13:27:12', remark: '很好' },
        { id: 5, operateType: '创建订单', operateBy: '王五', operateResult: '成功', operateTime: '2019-02-14 13:27:12', remark: '-' }
      ],
      datas2: [{ id: 5, operateType: '创建订单', operateBy: '王五', operateResult: '成功', operateTime: '2019-02-14 13:27:12', remark: '-' }]
    };
  },
  methods: {
    tabChanged(data) {
      message.info(`切换至${data.title}`, 1000);
    },
    goBack() {
      this.$router.push({ name: 'Order' });
    }
  }
};
</script>
